{% extends 'base.html' %}

{% block titleBlock %}
小北博客-首页
{% endblock %}
{% load blog_extras %}

{% block bodyBlock %}
<div class="content-body">
    <div class="container">
        <div class="row">
            <main class="col-md-8">
                {% for post in articles %}
                    <article class="post post-{{ post.id }}">
                        <header class="entry-header">
                            <h1 class="entry-title">
                                <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
                            </h1>
                            <div class="entry-meta">
                                <span class="post-category"><a href="#">{{ post.category.name }}</a></span>
                                <span class="post-date"><a href="#"><time class="entry-date"
                                                                          datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span>
                                <span class="post-author"><a href="#">{{ post.author }}</a></span>
                                <span class="comments-link"><a href="{{ post.get_absolute_url }}#comment-area">{{ post.comment_set.count }} 评论</a></span>
                                <span class="views-count"><a href="{{ post.get_absolute_url }}">{{ post.views }} 阅读</a></span>
                            </div>
                        </header>
                        <div class="entry-content clearfix">
                            <p>{{ post.excerpt }}...</p>
                            <div class="read-more cl-effect-14">
                                <a href="{{ post.get_absolute_url }}" class="more-link">继续阅读 <span class="meta-nav">→</span></a>
                            </div>
                        </div>
                    </article>
                {% empty %}
                    <div class="no-post">暂时还没有发布的文章！</div>
                {% endfor %}

                <div class="text-center pagination" style="width: 100%">
                  <ul>
                    {% if page_obj.has_previous %}
                      <li><a href="?{{ page_obj.previous_page_number.querystring }}"
                             class="prev">&lsaquo;&lsaquo; </a></li>
                    {% else %}
                      <li><span class="disabled prev">&lsaquo;&lsaquo; </span></li>
                    {% endif %}
                    {% for page in page_obj.pages %}
                      {% if page %}
                        {% ifequal page page_obj.number %}
                          <li class="current"><a href="#">{{ page }}</a></li>
                        {% else %}
                          <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                        {% endifequal %}
                      {% else %}
                        ...
                      {% endif %}
                    {% endfor %}
                    {% if page_obj.has_next %}
                      <li><a href="?{{ page_obj.next_page_number.querystring }}" class="next"> &rsaquo;&rsaquo;</a>
                      </li>
                    {% else %}
                      <li><span class="disabled next"> &rsaquo;&rsaquo;</span></li>
                    {% endif %}
                  </ul>
                </div>

                <!-- 简单分页效果
                <div class="pagination">
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">...</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li class="current"><a href="">6</a></li>
                        <li><a href="">7</a></li>
                        <li><a href="">8</a></li>
                        <li><a href="">...</a></li>
                        <li><a href="">11</a></li>
                    </ul>
                </div>
                -->
            </main>
            <aside class="col-md-4">
                {% show_recent_posts %}
                {% show_archives %}
                {% show_categories %}
                {% show_tags %}

                <div class="rss">
                    <a href="{% url 'rss' %}"><span class="ion-social-rss-outline"></span> RSS 订阅</a>
                </div>
            </aside>
        </div>
    </div>
</div>
{% endblock %}